<template>
  <div class="drawLottery">
    <div class="changeTip"><span>今日您还有 {{residue}}次 抽奖机会</span></div>
    <div class="card">
      <div class="main">
        <div class="left">
          <div class="div">
            <van-swipe :autoplay="autoplayTime" :vertical="true" :show-indicators="false" :touchable="false">
              <van-swipe-item v-for="(i,index) in list1" :key="index">
                <div class="label" v-show="!show">{{i.score}}</div>
                <div class="label" v-show="show">{{form.result[0]}}</div>
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="div">
            <van-swipe :autoplay="autoplayTime" :vertical="true" :show-indicators="false" :touchable="false">
              <van-swipe-item v-for="(i,index) in list2" :key="index">
                <div class="label" v-show="!show">{{i.score}}</div>
                <div class="label" v-show="show">{{form.result[1]}}</div>
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="div">
            <van-swipe :autoplay="autoplayTime" :vertical="true" :show-indicators="false" :touchable="false">
              <van-swipe-item v-for="(i,index) in list3" :key="index">
                <div class="label" v-show="!show">{{i.score}}</div>
                <div class="label" v-show="show">{{form.result[2]}}</div>
              </van-swipe-item>
            </van-swipe>
          </div>

        </div>
        <div class="right">
          <img src="@/assets/images/drawLotteryRight.png" alt="">
        </div>
      </div>
    </div>
    <div class="btn" @click="autoplay"><img src="@/assets/images/drawLotteryBtn.png" alt=""></div>
    <div class="tip">
      <p>规则说明</p>
      <p v-html="rule"></p>
    </div>
    <div class="toast" v-show="toastShow">
      <div class="toastSuccess">
        <div class="toastTitle">{{form.win | titleFilter}}</div>
        <div class="toastContent">{{form.desc}}</div>
        <div class="toastBtn" @click="confirm">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/7 16:25.
   */
  import utils from '../../../lib/StringExtend'

  export default {
    mounted() {
      if (!utils.isNone(utils.getCookie('open_id_' + this.wechatId)) && !utils.isNone(this.wechat_id)) {
        this.loadData();
      } else if (!utils.isNone(utils.getCookie('open_id_' + this.wechatId))) {
        setTimeout(() => {
          this.loadData();
        }, 300)
      }
    },
    components: {},
    props: {},
    data() {
      return {
        residue: 0,//抽奖次数
        autoplayTime: 0, //摇奖速度
        toastShow: false, //弹窗
        show: false,//摇奖结果
        rule: '',  //规则
        list1: [],
        list2: [],
        list3: [],
        form: {
          result: [0, 0, 0]
        },
        wechatId: utils.getCookie('wechat_id'),
        wechat_id: this.$route.query.wechat_id,//公众号
      }
    },
    computed: {},
    methods: {
      loadData() {
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        this.$axios.autoWinDrawInfo(params).then(res => {
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.list1 = res.data.list_1;
          this.list2 = res.data.list_2;
          this.list3 = res.data.list_3;
          this.residue = res.data.residue;
          var reg = new RegExp(" ", "g");
          this.rule = res.data.rule.replace(reg, '<br>');
        })
      },
      //开始抽奖
      autoplay() {
        if (this.autoplayTime > 0) {
          return;
        }
        if (this.residue == '0') {
          this.$toast('今日次数已用完，请明日再来哦～');
          return
        }
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        this.$axios.autoWinClickBegin(params).then(res => {
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return;
          }
          this.residue = res.data.residue;
          this.form = res.data;
          this.autoplayTime = 50;
          this.show = false;
          setTimeout(() => {
            this.autoplayTime = 0;
            this.show = true;
            setTimeout(() => {
              this.toastShow = true;
            }, 200)
          }, 3000)
        });

      },
      confirm() {
        this.toastShow = false;
      }
    },
    watch: {},
    filters: {
      titleFilter(val) {
        switch (val) {
          case 0:
            return '很遗憾';
            break;
          case 1:
            return '恭喜您';
            break;
          default:
            return '';
            break;
        }
      }
    },
    beforeDestroy() {

    }
  }
</script>
<style lang="less" scoped>
  .drawLottery {
    width: 100%;
    height: 100%;
    background: url("../../../assets/images/drawLotteryBg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;

    .changeTip {
      width: 100%;
      padding-top: 2.2rem;
      text-align: center;
      box-sizing: border-box;

      span {
        color: #ffffff;
        border: solid 1px #ffffff;
        font-size: 0.25rem;
        border-radius: 0.17rem;
        height: 0.34rem;
        line-height: 0.34rem;
        padding: 0.04rem 0.1rem;
      }
    }

    .card {
      margin-top: 0.38rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      .main {
        display: flex;
        flex-direction: row;
      }

      .left {
        width: 6.07rem;
        height: 3rem;
        background: url("../../../assets/images/drawLotteryLeft.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.4rem;
        box-sizing: border-box;

        .div {
          width: 1.7rem;
          height: 2.15rem;
          overflow: hidden;
          background: url("../../../assets/images/rotatingLayer.png") no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;

          .van-swipe {
            width: 100%;
            height: 80%;
          }

          .van-swipe-item {
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .label {
            width: 1.35rem;
            height: .66rem;
            line-height: .66rem;
            color: white;
            font-size: 0.24rem;
            border-radius: 0.1rem;
            background-image: linear-gradient(126deg,
            #f67e6e 0%,
            #f45540 100%),
            linear-gradient(
              #f0073c,
              #f0073c);
            background-blend-mode: normal,
            normal;
          }
        }
      }

      .right {
        width: 0.95rem;
        height: 3rem;
        display: flex;
        align-items: center;

        img {
          width: 100%;
          height: auto;
          margin: auto 0;
        }
      }

      .li {
        width: 30%;
        height: 100%;
      }
    }

    .btn {
      width: 1.8rem;
      height: 0.98rem;
      margin: 0.74rem auto;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .tip {
      width: 80%;
      margin: 0 auto;
      text-align: left;
      color: white;
      font-size: 0.24rem;

      p:first-child {
        font-size: 0.3rem;
        line-height: 0.6rem;
      }
    }

    .toast {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);

      .toastSuccess {
        width: 5.4rem;
        height: 4.6rem;
        position: absolute;
        top: calc(32% - 2.1rem);
        left: calc(50% - 2.7rem);
        background: url("../../../assets/images/toast_success.png") no-repeat;
        background-size: 100% 100%;

        .toastTitle {
          position: absolute;
          top: 0.2rem;
          width: 80%;
          height: 1rem;
          text-align: center;
          left: 10%;
          line-height: 1rem;
          color: #dc5043;
        }

        .toastContent {
          position: absolute;
          top: 1.6rem;
          width: 80%;
          height: 1rem;
          text-align: center;
          left: 10%;
          line-height: 1rem;
          color: #dc5043;
          font-weight: 700;
          font-size: 0.6rem;
        }

        .toastBtn {
          position: absolute;
          bottom: 0.5rem;
          width: 80%;
          height: 1.1rem;
          text-align: center;
          left: 10%;
          line-height: 1.1rem;
          color: #dc5043;
        }
      }
    }
  }
</style>
